<template>
    
    <!-- 组件模板内容 -->
    <div class="comp-wrap">
        <div class="weui-cells__title black relative">{{title}}<span v-if="required == 1" class="required_icon"> (必填)</span></div>
        <div class="weui-cells__tips">{{tip}}</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <validator name="validation1">
                        <input 
                            class="weui-input" 
                            @valid="onValid" 
                            @invalid="onInvalid"
                            type="tel" 
                            pattern="[0-9]*" 
                            placeholder="只能输入纯数字" 
                            v-model="val" 
                            v-validate:username="['required']"
                        />
                    </validator>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Navtive API
     *  example : import widget from 'gapi/widget'
     */
    import Vue from 'vue'
    import VueValidator from 'vue-validator'
    Vue.use(VueValidator)
    // console.log(Validator)

    /**
     *  引入Action
     *  example : import { someFunction } from './SomeAction'
     */
    
    /**
     *  引入Getter
     *  example : import { someFunction } from './SomeGetters'
     */

    export default {
        vuex: {
            getters: {
                
            },
            actions: {

            }
        },
        props: ['title', 'tip', 'val', 'required', 'isvalid'],
        methods: {
            onValid (){
                this.isvalid = true
            },
            onInvalid (){
                if(this.required == 0){
                    this.isvalid = true
                }else{
                    this.isvalid = false
                }
            }
        },
        ready (){
            // console.log(this.$validation1.valid)
        }
    }

    
</script>

<!-- CSS 样式 -->
<!-- <style src="static/css/global.css"></style> -->
<style type="text/css">
    html body{
        /*background-color: #fff;*/
    }
    div.weui-cells{
        margin-top:0px;
    }
    div.weui-cells__tips{
        margin-bottom: .3em;
    }
</style>

